import React, { useState } from "react";
import { Row, Col } from 'antd';

import { useThemeToken } from "@/constants";

import OrgTree from "../../components/OrgTree";
import List from "./List";

const User: React.FC = () => {
    const { themeToken } = useThemeToken();
    const [deptId, setDeptId] = useState<number>();

    return <div style={{height: "100%", overflow:"hidden"}}>
        <Row style={{height:"100%"}} gutter={5}>
            <Col span={5} style={{backgroundColor: themeToken.proTableToken.headerBgColor}}>
                <OrgTree
                    isAllowCancelSelected={false}
                    onOrgChange={(deptId) => {
                        setDeptId(deptId);
                    }}
                />
            </Col>

            <Col span={19}>
                {deptId && <List deptId={deptId}/>}
            </Col>
        </Row>
    </div>
}

export default User;
